<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟Dom与diff算法</title>
    <script src="../js/vue.js"></script>
    <style>
        th,td{border:1px solid black;}
    </style>
</head>
<body>

<div id="app">
    <h1>{{msg}}</h1>
    <table>
        <tr>
            <th>序号</th>
            <th>英雄</th>
            <th>能量值</th>
            <th>选择</th>
        </tr>
<!--
        v-for 指令所在的标签中，还有一个非常重要的属性:key

        如果没有指定: key属性，会自动拿index作为key
        这个 key 是这个 dom 元素的身份证号/唯一标识

        分析以下：采用 index作为 key存在什么问题？
            第一问题: 效率低
            第二问题：非常严重了，产生了错乱，尤其是对数组当中的某些元素进行操作，（非末尾元素）,末尾添加元素就没有错乱
            怎么解决这个问题？
                建议使用对象的 id 作为 key(因为 id 在后端作为数据库表中是主键，是唯一的，是不会重复的)
                2. 或者是在表的末尾添加元素：  this.heros.push({id:'105',name:'麦文',power:9100})
-->
  <!--      <tr v-for="(hero,index) in heros">
            <td>{{index+1}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.power}}</td>
            <td><input type="checkbox"></td>
            <button @click="add">添加英雄麦文</button>
        </tr>-->
        <tr v-for="(hero,index) in heros" :key="hero.id">
            <td>{{index+1}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.power}}</td>
            <td><input type="checkbox"></td>
            <button @click="add">添加英雄麦文</button>
        </tr>
    </table>
</div>


<script>

    const vm = new Vue({
        el : '#app',
        data: {
            msg:'虚拟dom与diff算法',
            heros:[
                {id:'101',name:'艾格夫',power:1000},
                {id:'102',name:'麦迪文',power:6000},
                {id:'103',name:'吉尔丹',power:8000},
                {id:'104',name:'萨尔',power:6000}
            ]
        },

        methods:{
            add(){
                // this.heros.push({id:'105',name:'麦文',power:9100})
                this.heros.unshift({id:'105',name:'麦文',power:9100})
            }
        }
    })


</script>
</body>
</html>